<template>
  <div :class="eClass" id="tag" v-if="!close">
    <span><slot></slot></span>
    <span v-if="closable" @click="handleClose" @mouseenter="handleEnter" @mouseleave="handleLeave">
      <svg t="1660292750294" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3370" width="200" height="200"><path d="M835.797333 202.197333c-12.8-12.8-32-12.8-44.8 0l-272 272-272-272c-12.8-12.8-32-12.8-44.8 0-12.8 12.8-12.8 32 0 44.8l272 272-272 272c-12.8 12.8-12.8 32 0 44.8 12.8 12.8 32 12.8 44.8 0l272-270.4 272 272c12.8 12.8 32 12.8 44.8 0 12.8-12.8 12.8-32 0-44.8l-272-272 272-272c12.8-14.4 12.8-33.6 0-46.4z" fill="#333333" p-id="3371"></path></svg>
    </span>
  </div>
</template>
<script setup>
import { computed,ref } from 'vue'
var close = ref(false)
const props = defineProps({
  size: {
    type: String,
    default: ''
  },
  dark: {
    type: Boolean,
    default: false
  },
  closable: Boolean,
  status: {
    type: String,
    default: 'ing'
  }
})
// onMounted(()=>{
//   console.log(props.status)
// })
const emits = defineEmits(['close'])
const eClass = computed(()=>{
  return [
    'e-tag',
    props.size ? `e-tag-${props.size}` : 'e-tag-medium',
    props.dark ? `e-tag--dark` : '',
    props.closable ? 'closable' : '',
    `e-tag--${props.status}`
  ]
})

const handleClose = (e) => {
  emits('close',e)
  close.value = true
}
const handleEnter = (e) => {
  e.target.parentNode.classList.add('close-hover')
}
const handleLeave = (e) => {
  e.target.parentNode.classList.remove('close-hover')
}
</script>
